<template>
  <div class="cart">
    <Header></Header>
    <div class="main">
      <div class="shopping-cart-wrap">

        <h3 class="shopping-cart-tit">
          我的购物车
          <small>
            共
            <span>2</span>
            门课程
          </small>
        </h3>
        <h1>{{form.region}}</h1>
        <div class="content">
          <CartItem
            v-for="(value,index) in cart_list"
            :key="value.id"
            :cart="value"
            @change_expire_handler="calc_price"
            @del_course="del_c(index)">
          </CartItem>
        </div>
        <ul class="pas-left">
          <li class="charge-list">
            <input v-model="checked" type="checkbox" class="select_all" id="color-input-red" width="20px" height="20px">
            <label
              class="shopping-cart-bot-font"
              style="margin-left: 15px; cursor: pointer"
              for="color-input-red"
              @click="selected_all">
              全选
            </label>
<!--            <span class="shopping-cart-bot-font" style="margin-left: 15px; cursor: pointer">全选</span>-->
          </li>
          <li class="charge-list" style="margin-left: 58px;">
            <span
              class="shopping-cart-bot-font"
              style="margin-left: 15px; cursor: pointer; border: 0;"
              @click="deleted_many_course">
              删除选中课程
            </span>
          </li>
          <li class="charge-list" style="margin-left: auto">
            <span class="shopping-cart-bot-font" style="margin-right: 62px">总计: <b>{{total_price.toFixed(2)}}</b>￥</span>
            <button class="go-charge-btn">去结算</button>
          </li>

        </ul>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>

<script>
  import Header from "./common/Header";
  import Footer from "./common/Footer";
  import CartItem from "./common/CartItem";

  export default {
    name: "Cart",
    data() {
      return {
        checked: false,
        cart_list: [],
        // token: true,
        total_price: 0.0,
        form: {
          region: '',
        },
      }
    },
    methods: {
      check_user_login() {
        let token = localStorage.user_token || sessionStorage.user_token;
        if (!token) {
          let self = this;
          this.$confirm('对不起，您尚未登录！请先登录在添加购物车', '路飞学城', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
          }).then(() => {
            self.$router.push('/login/');
          });
          return false
        }
        return token;
      },
      get_cart_data() {
        // 先要验证用户是否登录
        let token = this.check_user_login();

        // 将课程id发送到后端
        if (!token) {  // 如果token为false，AddCart函数不执行
          return false;
        }

        this.$axios.get(`${this.$settings.Host}/cart/`,{
          headers: {
            'Authorization': 'jwt ' + token,
          }
        }).then(res => {
          // console.log(res.data);
          this.cart_list = res.data.msg;
          this.calc_price();
        }).catch(error => {
          console.log(error.response);
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      calc_price() {
        let total = 0;

        this.cart_list.forEach(function (value, index) {
          if (value.is_selected){
            total += parseFloat(value.real_price);
          }
        });
        this.total_price = total;
      },
      del_c(index) {
        this.cart_list.splice(index,1);
        this.calc_price();
      },

      // 全选按钮
      selected_all() {
        this.cart_list.forEach((value, index) => {
          value.is_selected = !this.checked;
          console.log(value.is_selected);
        })
      },

      // 批量删除选中课程
      deleted_many_course() {
        let token = this.check_user_login();
        let cart_many_select = [];
        this.cart_list.forEach((value, index) => {
          if (value.is_selected){
            cart_many_select.push(value.id);
          }
        });
        console.log(cart_many_select);
        this.$axios.delete(
          `${this.$settings.Host}/cart/?course_id=${cart_many_select}`,
          {
            headers: {
              'Authorization': 'jwt ' + token,
            }
          },
        ).then(
          res => {
            let cart_list=[];
            this.cart_list.forEach((value, index) => {
               if (!cart_many_select.includes(value.id)) {
                 cart_list.push(value);
               }
            });
            this.cart_list = cart_list;
            this.$message.success('删除成功！');
          }
        ).catch(
          error=>{
            this.$message.error(error.response.data.msg);
          }
        )
      }
    },
    created() {
      this.get_cart_data();
    },
    components: {
      Header,
      Footer,
      CartItem,
    },
  }
</script>

<style scoped>

  .main {
    width: 100%;
    /*flex: 1;*/
    /*flex-grow: 1;*/
    /*flex-direction: column;*/
  }

  .shopping-cart-wrap {
    width: 1200px;
    margin: 0 auto;
  }

  .shopping-cart-tit {
    font-size: 18px;
    color: #666;
    margin: 25px 0;
    font-family: PingFangSC-Regular;
  }

  .shopping-cart-tit small {
    font-size: 12px;
    color: #d0d0d0;
    display: inline-block;
    font-family: PingFangSC-Regular;
  }

  .content {
    width: 100%;
  }

  .content .content-img {
    display: flex;
    align-items: center;
  }

  .content img {
    width: 175px;
    height: auto;
    margin-right: 35px;
  }

  .do-btn {
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    color: #ffc210;
    margin-right: 15px;
    font-family: PingFangSC-Regular;
  }

  /*.c1 /deep/ .el-form-item__content{*/
  /*  !*注意：element-ui中的标签都是自动生成的，这些标签其实并不是我们自己在文档中写的，
  所以我们直接使用它翻译出来的标签的class类值来找对应的标签进行修改是找不到，
  所以如果希望scoped 样式中的选择器“深入”，也就是修改当前组件的element-ui插件的样式，
  即影响子组件，则可以使用 >>> 组合器，但是需要我们确保使用的element-ui标签外层有一个我们自己写的父级标签，
  举个例子：比如我写的父级标签的class类值为a，里面的element-ui的标签类值为el-form-item，
  我想修改el-form-item的样式，那么就要这么写选择器：.a >>> .el-form-item{color:'red';},这就可以了，
  但是官方文档中的方法说某些预处理器（如Sass）可能无法对>>>符号正确解析。在这些情况下，
  你可以使用 /deep/ 组合器 和 >>>符号完全相同。例如.a /deep/ .el-form-item{color:'red';}，
  当然，我们还可以直接在APP这个全局组件中直接进行样式修改，但是如果进行全局样式修改会污染其他组件中使用了这个插件的样式，
  所以不建议在全局修改样式*!*/
  /*  margin-top: 20px;*/
  /*  width: 120px;*/
  /*}*/
  .cc /deep/ .el-form-item__content {
    width: 140px;
    margin-left: 0!important;
  }


  .shopping-cart-wrap .pas-left {
    width: 100%;
    height: 80px;
    background: #F7F7F7;
    margin-bottom: 100px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    padding-left: 25px !important;
  }

  .charge-list {
    display: flex;
    align-items: center;
    list-style: none;
  }

  .charge-list .shopping-cart-bot-font {
    font-size: 18px;
    color: #666;
    font-family: PingFangSC-Regular;
  }

  .charge-list .go-charge-btn {
    width: 159px;
    height: 80px;
    outline: none;
    border: none;
    background: #ffc210;
    font-size: 18px;
    color: #fff;
    font-family: PingFangSC-Regular;
  }

</style>
